import { Decoration6, Decoration8, Decoration10 } from "@jiaminghi/data-view-react";
import dayjs from "dayjs";
import React, { useEffect, useRef, useState } from "react";

const TopPage: React.FC = () => {
  const timer = useRef<number | null>(null);
  const [currentTime, setCurrentTime] = useState<string>("");

  const setTimeFormat = () => {
    const weekMap = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"] as string[];
    // @ts-expect-error setInterval
    timer.current = setInterval(() => {
      setCurrentTime(`${dayjs().format("YYYY-MM-DD")}｜${dayjs().format("HH:mm:ss")} ${weekMap[dayjs().day()]}`);
    }, 1000);
  };

  useEffect(() => {
    setTimeFormat();
    return () => {
      timer.current && clearInterval(timer.current);
    };
  }, []);

  return (
    <div className="flex pt-[20px]">
      <Decoration10 style={{ width: "33.3%", height: "5px" }} />
      <Decoration8 color={["#568aea", "#000000"]} style={{ width: "200px", height: "50px" }} />
      <div className="w-[30%] flex flex-col items-center mt-[20px]">
        <span className="text-[24px] text-white mb-[20px]">{import.meta.env.VITE_APP_TITLE}</span>
        <Decoration6 color={["#50e3c2", "#67a1e5"]} style={{ width: "50%", height: "8px" }} />
      </div>
      <Decoration8 reverse={true} color={["#568aea", "#000000"]} style={{ width: "200px", height: "50px" }} />
      <Decoration10 style={{ width: "33.3%", height: "5px" }} />
      <span className="absolute top-[50px] right-[20px] text-[18px] text-[#bcdcff]">{currentTime}</span>
    </div>
  );
};

export default TopPage;
